<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行业数据分析中心</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans SC', sans-serif;
      background: #f8fafc;
      margin: 0;
      padding: 0;
    }

    .app-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .header {
      background: linear-gradient(135deg, #409eff, #67c23a);
      color: white;
      padding: 40px 20px;
      border-radius: 16px;
      margin-bottom: 40px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(64, 158, 255, 0.2);
    }

    .header-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .header-subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .grid-cell {
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .grid-cell:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    .grid-header {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
    }

    .grid-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;
    }

    .grid-title {
      font-size: 1.3rem;
      font-weight: 600;
    }

    .grid-desc {
      padding: 16px 20px;
      color: #666;
      font-size: 0.95rem;
      flex: 1;
    }

    .chart-container {
      width: 100%;
      height: 240px;
      padding: 10px;
    }

    .industry-tag {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      margin-right: 8px;
    }

    .tag-tech {
      background-color: #e3f2fd;
      color: #2196f3;
    }

    .tag-finance {
      background-color: #e8f5e9;
      color: #4caf50;
    }

    .tag-retail {
      background-color: #fff3e0;
      color: #ff9800;
    }

    .tag-health {
      background-color: #f3e5f5;
      color: #9c27b0;
    }

    .tag-education {
      background-color: #e0f7fa;
      color: #00bcd4;
    }

    .tag-entertainment {
      background-color: #fce4ec;
      color: #e91e63;
    }

    .tag-transport {
      background-color: #ede7f6;
      color: #512da8;
    }

    .tag-manufacture {
      background-color: #e8eaf6;
      color: #3949ab;
    }

    .tag-energy {
      background-color: #fff8e1;
      color: #ffc107;
    }

    .footer {
      text-align: center;
      margin-top: 60px;
      padding: 20px;
      color: #999;
      font-size: 0.9rem;
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <div class="header">
        <h1 class="header-title">行业数据分析中心</h1>
        <p class="header-subtitle">各行业市场趋势、用户分布及发展评估</p>
      </div>

      <div class="grid-container">
        <div v-for="item in gridItems" :key="item.id" class="grid-cell">
          <div class="grid-header">
            <div class="grid-icon" :style="{ backgroundColor: item.iconBgColor }">
              <i :class="item.icon"></i>
            </div>
            <div>
              <div class="grid-title">{{ item.title }}</div>
              <div class="industry-tag" :class="'tag-' + item.industry">{{ item.industryText }}</div>
            </div>
          </div>
          <div class="grid-desc">{{ item.desc }}</div>
          <div class="chart-container" :id="'chart-' + item.id"></div>
        </div>
      </div>

      <div class="footer">
        <p>© 2025 行业数据分析中心 | 数据仅供参考</p>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref, onMounted } = Vue;
    const app = createApp({
      setup() {
        const gridItems = ref([
          {
            id: 1,
            title: "科技行业用户增长",
            desc: "展示过去一年科技行业主要产品的用户增长趋势",
            industry: "tech",
            industryText: "科技",
            chartType: "line",
            icon: "fa fa-laptop",
            iconBgColor: "#e3f2fd"
          },
          {
            id: 2,
            title: "金融产品市场份额",
            desc: "各大金融机构主要产品在市场中的占有率分布",
            industry: "finance",
            industryText: "金融",
            chartType: "pie",
            icon: "fa fa-money",
            iconBgColor: "#e8f5e9"
          },
          {
            id: 3,
            title: "零售行业销售对比",
            desc: "不同零售渠道过去半年的销售额对比分析",
            industry: "retail",
            industryText: "零售",
            chartType: "bar",
            icon: "fa fa-shopping-cart",
            iconBgColor: "#fff3e0"
          },
          {
            id: 4,
            title: "健康医疗满意度",
            desc: "患者对不同类型医疗机构的满意度综合评估",
            industry: "health",
            industryText: "医疗",
            chartType: "radar",
            icon: "fa fa-medkit",
            iconBgColor: "#f3e5f5"
          },
          {
            id: 5,
            title: "教育科技投资趋势",
            desc: "近三年教育科技领域各细分方向的投资变化趋势",
            industry: "education",
            industryText: "教育",
            chartType: "line",
            icon: "fa fa-graduation-cap",
            iconBgColor: "#e0f7fa"
          },
          {
            id: 6,
            title: "娱乐平台用户分布",
            desc: "不同年龄段用户在各主流娱乐平台的分布情况",
            industry: "entertainment",
            industryText: "娱乐",
            chartType: "bar",
            icon: "fa fa-film",
            iconBgColor: "#fce4ec"
          },
          {
            id: 7,
            title: "交通运输能耗分析",
            desc: "各类交通工具在不同场景下的能源消耗对比",
            industry: "transport",
            industryText: "交通",
            chartType: "radar",
            icon: "fa fa-car",
            iconBgColor: "#ede7f6"
          },
          {
            id: 8,
            title: "制造业生产效率",
            desc: "自动化技术对制造业各环节生产效率的提升效果",
            industry: "manufacture",
            industryText: "制造",
            chartType: "line",
            icon: "fa fa-cogs",
            iconBgColor: "#e8eaf6"
          },
          {
            id: 9,
            title: "能源消耗结构",
            desc: "不同行业能源消耗类型及占比情况分析",
            industry: "energy",
            industryText: "能源",
            chartType: "pie",
            icon: "fa fa-bolt",
            iconBgColor: "#fff8e1"
          }
        ]);

        // 初始化图表
        const initCharts = async () => {
          for (const item of gridItems.value) {
            try {
              const chartDom = document.getElementById(`chart-${item.id}`);
              if (!chartDom) continue;

              const myChart = echarts.init(chartDom);

              // 调用后端API获取数据
              const response = await fetch(`http://localhost:5000/chart-data?type=${item.chartType}`);
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
              }
              const chartData = await response.json();

              // 根据图表类型设置不同配置
              let option;
              switch (item.chartType) {
                case "line":
                  option = {
                    tooltip: {
                      trigger: 'axis',
                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
                      borderColor: '#eee',
                      borderWidth: 1,
                      textStyle: { color: '#333' },
                      axisPointer: {
                        type: 'cross',
                        lineStyle: { color: '#409eff' }
                      }
                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: chartData.xAxisData,
                      axisLine: {
                        lineStyle: { color: '#999' }
                      },
                      axisTick: {
                        show: false
                      }
                    },
                    yAxis: {
                      type: 'value',
                      axisLine: {
                        show: false
                      },
                      axisTick: {
                        show: false
                      },
                      splitLine: {
                        lineStyle: { color: '#eee' }
                      }
                    },
                    series: [{
                      data: chartData.seriesData,
                      type: 'line',
                      smooth: true,
                      areaStyle: {
                        opacity: 0.2,
                        color: '#409eff'
                      },
                      lineStyle: {
                        color: '#409eff',
                        width: 2
                      },
                      itemStyle: {
                        color: '#409eff',
                        borderWidth: 2
                      }
                    }]
                  };
                  break;

                case "bar":
                  option = {
                    tooltip: {
                      trigger: 'axis',
                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
                      borderColor: '#eee',
                      borderWidth: 1,
                      textStyle: { color: '#333' }
                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: {
                      type: 'category',
                      data: chartData.xAxisData,
                      axisLine: {
                        lineStyle: { color: '#999' }
                      },
                      axisTick: {
                        show: false
                      }
                    },
                    yAxis: {
                      type: 'value',
                      axisLine: {
                        show: false
                      },
                      axisTick: {
                        show: false
                      },
                      splitLine: {
                        lineStyle: { color: '#eee' }
                      }
                    },
                    series: [{
                      data: chartData.seriesData,
                      type: 'bar',
                      color: '#409eff',
                      barWidth: '60%',
                      itemStyle: {
                        borderRadius: 6
                      }
                    }]
                  };
                  break;

                case "pie":
                  option = {
                    tooltip: {
                      trigger: 'item',
                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
                      borderColor: '#eee',
                      borderWidth: 1,
                      textStyle: { color: '#333' },
                      formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                      type: 'scroll',
                      orient: 'horizontal',
                      bottom: '5%',
                      left: 'center',
                      itemWidth: 10,
                      itemHeight: 10,
                      textStyle: {
                        color: '#666',
                        fontSize: 11
                      }
                    },
                    series: [{
                      type: 'pie',
                      radius: ['40%', '70%'],
                      center: ['50%', '40%'],
                      data: chartData.pieData,
                      label: {
                        formatter: '{b|{b}}\n{d}%',
                        rich: {
                          b: {
                            fontSize: 12,
                            lineHeight: 20
                          }
                        }
                      },
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.2)'
                        }
                      }
                    }]
                  };
                  break;

                case "radar":
                  option = {
                    tooltip: {
                      trigger: 'item',
                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
                      borderColor: '#eee',
                      borderWidth: 1,
                      textStyle: { color: '#333' }
                    },
                    radar: {
                      indicator: chartData.radarIndicator,
                      shape: 'circle',
                      radius: '70%',
                      axisName: {
                        color: '#666',
                        fontSize: 11
                      },
                      splitLine: {
                        lineStyle: {
                          color: '#eee'
                        }
                      },
                      axisLine: {
                        lineStyle: {
                          color: '#ccc'
                        }
                      },
                      splitArea: {
                        show: true,
                        areaStyle: {
                          color: ['rgba(245, 245, 245, 0.2)', 'rgba(245, 245, 245, 0.4)',
                                 'rgba(245, 245, 245, 0.6)', 'rgba(245, 245, 245, 0.8)']
                        }
                      }
                    },
                    series: [{
                      type: 'radar',
                      data: [{
                        value: chartData.radarData,
                        name: '评估值',
                        itemStyle: {
                          color: '#409eff'
                        },
                        lineStyle: {
                          width: 2
                        },
                        areaStyle: {
                          opacity: 0.2
                        }
                      }]
                    }]
                  };
                  break;

                default:
                  // 默认使用折线图
                  option = {
                    title: {
                      text: `${item.title} 趋势`,
                      left: 'center',
                      textStyle: { fontSize: 14 }
                    },
                    xAxis: {
                      type: 'category',
                      data: chartData.xAxisData
                    },
                    yAxis: {
                      type: 'value'
                    },
                    series: [{
                      data: chartData.seriesData,
                      type: 'line'
                    }]
                  };
              }

              // 应用配置
              myChart.setOption(option);

              // 监听窗口大小变化，调整图表
              window.addEventListener('resize', () => {
                myChart.resize();
              });
            } catch (error) {
              console.error(`初始化图表 ${item.id} 失败:`, error);
            }
          }
        };

        // 页面加载后初始化图表
        onMounted(() => {
          initCharts();
        });

        return {
          gridItems
        };
      }
    });

    app.use(ElementPlus);
    app.mount('#app');
  </script>
</body>
</html>